<template>
	<div class="tabbar">
		<van-tabbar route active-color="#07c160" inactive-color="#000" v-model="tabbarActive">
		  <van-tabbar-item :badge="item.id == 3 ? 2 : ''"  :to="item.url" v-for="item in tabbarList" :key="item.id" :name="item.name">
		  <van-icon class="iconfont" slot="icon" class-prefix="icon" :name="tabbarActive == item.name ? item.iconActive : item.icon"></van-icon>
		  <span>{{item.text}}</span>
		  </van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				tabbarActive : 'home',
				tabbarList : [
					{url:'/home', id : 1, text : '首页', icon : 'home', iconActive : 'home-copy', name:'home'},
					{url:'/sort', id : 2, text : '分类', icon : 'sort', iconActive : 'sort-copy', name : 'sort'},
					{url:'/cart', id : 3, text : '购物车', icon : 'cart', iconActive : 'cart-copy', name:'cart'},
					{url:'/user', id : 4, text : '个人', icon : 'user', iconActive : 'user-copy', name:'user'},
				],
			}
		},
	}
</script>

<style>
</style>
